<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="24" style="height: 50px; line-height: 50px; text-align: center">
        header
      </el-col>
    </el-row>
    <el-row :gutter="20" class="item-row">
      <el-col :span="12"></el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <el-row :gutter="20" class="item-row">
      <el-col :span="12"></el-col>
      <el-col :span="12">
        <div ref="chartRef" style="width: 100%; height: 100%; position: relative"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import _ from 'lodash'
import { ref, onMounted } from 'vue'
const chartRef = ref()
const creatChart = () => {
  const list: string[] = []
  for (let i = 0; i < 24; i++) {
    let str = `${i}:00`
    str = str.padStart(5, '0')
    list.push(str)
  }
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list
    },
    yAxis: {},
    series: [
      {
        symbolSize: 20,
        data: [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
          [9.15, 7.2],
          [11.5, 7.2],
          [3.03, 4.23],
          [12.2, 7.83],
          [2.02, 4.47],
          [1.05, 3.33],
          [4.05, 4.96],
          [6.03, 7.24],
          [12.0, 6.26],
          [12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]
        ],
        type: 'scatter',
        markLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      }
    ]
  }
  echarts.init(chartRef.value).setOption(option)
}
const testLodash = () => {
  const a = {
    title: 'hello',
    legend: {
      show: true,
      data: ['hello', 'world']
    },
    xAxis: {
      show: true,
      axisLabel: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: [
      {
        type: 'bar',
        name: 'aa',
        data: [1, 2, 3, 4]
      }
    ]
  }
  const b = {
    xAxis: {
      axisLabel: {
        formatter: function (val) {
          return `${val}%`
        }
      }
    },
    series: [
      {
        type: 'bar',
        name: 'aa',
        data: [1, 2, 3, 4, 5, 6]
      },
      {
        type: 'line',
        name: 'bb',
        data: [1, 2, 3, 4, 5, 6, 7, 8]
      }
    ]
  }
  const c = _.merge(a, b)
  console.log(c)
}
onMounted(() => {
  testLodash()
  creatChart()
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
:deep(.el-row) {
  margin-bottom: 10px;
}
.item-row {
  height: calc(50% - 45px);
  background-color: #fff;
}
:deep(.item-row .el-col) {
  background-color: #f4f5f6;
}
</style>
